<template>
  <div class="xm-map">
    <div class="map-container" :id="options.id || 'xmMap' + _uid"></div>
    <div class="tool-bar" v-if="showToolBar">
      <div class="full-screen" v-if="hasScreenBtn">
        <img class="screen-icon" v-show="!isFullScreen" @click="toggleFullScreen(true)" src="@/assets/image/icon_full_screen.png" alt="" title="全屏">
        <img class="screen-icon" v-show="isFullScreen" @click="toggleFullScreen(false)" src="@/assets/image/icon_full_screen_exit.png" alt="" title="退出全屏">
      </div>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap';
import { toggleFullScreen } from '@/util/util'

const defaultPolygonOptions = {
  strokeColor: "#FF33FF",
  strokeWeight: 6,
  strokeOpacity: 0.2,
  fillColor: "#1791fc",
  fillOpacity: 0.4,
  strokeStyle: "solid",
}
export default {
  name: 'XmMap',
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    hasScreenBtn: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      map: null,
      isFullScreen: false,
    };
  },
  computed: {
    showToolBar() {
      return this.hasScreenBtn
    }
  },
  methods: {
    initMap() {
      this.map = new AMap.Map(this.options.id || "xmMap" + this._uid, {
        center: this.options.center || undefined,
        zoom: this.options.zoom || 12,
      });
      this.$emit('loadedMap', this.map) // 初始化地图完毕
    },
    createMarker(options) {
      const { longitude, latitude, label = {}, icon = {}, offset, zIndex } = options
      const marker = new AMap.Marker({
        position: new AMap.LngLat(longitude, latitude),
        icon: new AMap.Icon({
          image: (icon && icon.image) || "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          imageSize: (icon && icon.imageSize) || new AMap.Size(28, 36), //图标大小
        }),
        offset: offset || new AMap.Pixel(-13, -30),
        zIndex: zIndex || 1,
      });
      if (label && label.content) {
        marker.setLabel({
          direction: "top", //设置文本标注方位
          ...label
        });
      }
      return marker
    },
    createPolygon(options) {
      const polygon = new AMap.Polygon(options);
      return polygon
    },
    setCenter(center) {
      this.map.setCenter(center);
    },
    setZoomAndCenter(...params) {
      this.map.setZoomAndCenter(...params);
    },
    clearMap() {
      this.map.clearMap();
    },
    plugin(plugins) {
      return new Promise((resolve) => {
        this.map.plugin(plugins, function () {
          resolve()
        })
      })
    },
    mouseToolPlugin() {
      return this.plugin(["AMap.MouseTool"]).then(() => {
        this._mouseTool = new AMap.MouseTool(this.map);
        return this._mouseTool
      })
    },
    // 开启画多边形
    openDrawPolygon(options = defaultPolygonOptions) {
      this._mouseTool && this._mouseTool.polygon(options);
    },
    // 根据覆盖物自适应居中
    setFitView(...params) {
      this.map.setFitView(...params)
    },
    // 行政区
    districtSearchPlugin(options) {
      return this.plugin(["AMap.DistrictSearch"]).then(() => {
        const opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district", //查询行政级别为 市
          ...options
        }
        this._districtSearch = new AMap.DistrictSearch(opts);
        return this._districtSearch
      })
    },
    // 生成行政区的polygon
    getDistrictPolygon(district) {
      return new Promise(resolve => {
        if (this._districtSearch) {
          this._districtSearch.search(district, (status, result) => {
            const d = result.districtList[0]
            const polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: d.boundaries,
              fillOpacity: 0.4,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
            });
            resolve(polygon)
          })
        } else {
          resolve()
        }
      })
    },
    // 根据overlays居中
    setCenterByOverlays() {
      const overlays = this.map.getAllOverlays()
      this.map.setFitView(overlays);
    },
    toggleFullScreen(isFullScreen) {
      this.isFullScreen = isFullScreen
      toggleFullScreen(this.$el, this.isFullScreen)
    },
    keyEsc(e) {
      if (!document.fullscreenElement) {
        this.toggleFullScreen(false);
      }
    }
  },
  mounted() {
    this.initMap();
    window.addEventListener("fullscreenchange",this.keyEsc);
  },
  destroyed() {
    window.removeEventListener("fullscreenchange",this.keyEsc);
  }
};
</script>
<style lang="scss" scoped>
.xm-map {
  height: 500px;
  width: 100%;
  position: relative;
  .map-container {
    height: 100%;
    width: 100%;
  }

  .tool-bar {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff;
    padding: 10px;
    z-index: 55;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
  }

  .full-screen {
    width: 24px;
    height: 24px;
    cursor: pointer;
    .screen-icon {
      width: 100%;
      height: 100%;
    }
  }
}
</style>